<style>      
  @import './../css/goodsSku.css';
</style>
<template>
  <div>
    <div class="goodsSku">
      <!-- 弹窗里的内容部分 -->
      <div v-transfer-dom>
        <!-- 通过$attrs的方式，可以拿到外面自定义属性传过来的值，即父组件上的v-bind:componentRelate="componentRelate"  -->
        <popup v-model='$attrs.componentRelate'>
          <div style="height:12.8rem;background:white;">
             <!-- 价格区 starts  -->
            <div class="Overlay_top flex-box">
                <div class="goodsColorImg">
                    <img v-bind:src='(popActiveColor != null && popActiveColor.imageUrl300)?popActiveColor.imageUrl300:data.productUrl300' alt="">
                </div>
                <div class="goodsDetailInfo">
                    <p class="goodsNames">{{data.productName}}</p>
                    <!-- 商品价格  -->
                    <p class='priceOfCommodities' v-if='data && data.eachSidePrice && data.eachSidePrice.wapPromoPromotionPrice'>
                        <b>￥{{data.eachSidePrice.wapPromoPromotionPrice}}</b>&nbsp;&nbsp;&nbsp;
                        <!-- 如果原价小于售价，则隐藏原价 -->
                        <span class='drop' v-if='data.eachSidePrice.wapPromoPromotionPrice<data.marketPrice'>吊牌价： <s> {{data.marketPrice}}</s></span>
                    </p>
                    <p class='stock'>库存&nbsp;&nbsp;<i id="stock_num">{{sizeOrColorStockNums || data.stockNum}}</i>件</p>
                </div>
                <div class='close' v-on:click='onMethod()'><icon class="close_icon" name="close" scale="10"></icon></div>
            </div>
             <!-- 价格区 end  -->
             <!-- 规格颜色区 start  -->
            <div class="Overlay_middle" v-if='data && data.status==1 && data.stockNum>0'>
              <dl class="goods_detail_size_list rule_choice sizeList" v-if='data && data.sizesList && data.sizesList.length'>
                <dt >规格:  &nbsp;<span v-if='popActiveGuiGe && popActiveGuiGe.saleAttr2Value' id="sizeSelected">已选择"{{popActiveGuiGe.saleAttr2Value}}"</span></dt>
                <dd v-on:click='choose_size(datas)' v-bind:class="{size:true, active:popActiveGuiGe && popActiveGuiGe.barcodeSysCode === datas.barcodeSysCode && data.stockNum,disabled2:datas.isActives}" v-for='datas in data.saleAttrList.saleAttr2List'>
                  <a v-if='data.stockNum==0' v-bind:id="'size_'+datas.saleAttr2ValueCode" style="cursor:not-allowed;color:#ccc;border: 1px dotted #ccc;">{{datas.saleAttr2Value}}</a>
                 <a v-else v-bind:id="'size_'+datas.saleAttr2ValueCode"  style="cursor:pointer" v-bind:goods_attr_sn='data.productSysCode' v-bind:s_code='datas.saleAttr2ValueCode' v-bind:a_type='data.activityType' v-bind:stock_num='datas.stockNum'>{{datas.saleAttr2Value}}</a> 
                </dd>  
              </dl>
              <dl class="goods_detail_size_list color_images colorList">
                  <dt>颜色:  &nbsp;<span v-if='popActiveColor && popActiveColor.saleAttr1Value' id="colorSelected">已选择 "{{popActiveColor.saleAttr1Value}}"</span></dt>
                  <dd v-on:click='choose_color(datass,$event)' v-bind:class="{size:true,actives:popActiveColor && popActiveColor.barcodeSysCode === datass.barcodeSysCode && data.stockNum,disabled3:datass.isActivess}" v-for='datass in data.saleAttrList.saleAttr1List'>
                  <a href="javascript:;" v-bind:id="'color_'+datass.saleAttr1ValueCode" v-bind:goods_attr_sn='data.productSysCode' v-bind:c_code='datass.saleAttr1ValueCode' v-bind:a_type='data.activityType' v-bind:stock_num='datass.stockNum' v-bind:img_url='datass.imageUrl300'><span v-if='data.stockNum !=0'>{{datass.saleAttr1Value}}</span></a>
                </dd>
              </dl>
            </div>
            <!-- 规格颜色区 end  -->
            <div class="Overlay_bottom">
                <button>确定</button>
            </div> 
          </div>
        </popup>
      </div>
    </div>  
  </div>
</template>
<script>
  import {TransferDom, Popup, Group, Cell ,XHeader, XInput, XButton, Box, Sticky, TabItem, Tab, XImg } from 'vux'
  export default {
    name: 'goodsSku',
    components: {
      XImg,
      TransferDom,
      Popup,
      Group,
      Cell,
      XHeader,
      XInput,
      XButton,
      Box,
      Sticky,
      TabItem,
      Tab  
    },
    directives: {
      TransferDom,
    },
    data () {
      return {
          isActive: true,
          //弹窗规格的初始值  
          popActiveGuiGe: null,
          //弹窗规格的初始值
          popActiveColor: null,
          selected: true,
          show: false,
          info: "",
          data: {},
          secondData: {},
          //点击尺寸或者颜色显示库存
          sizeOrColorStockNums: null,
          //灰显
          none: false
      }
    },
    methods: {
      //规格里的元素点击事件
      choose_size(data) {
          if(this.popActiveGuiGe && this.popActiveGuiGe.barcodeSysCode === data.barcodeSysCode) {
            this.popActiveGuiGe = null;
            this.sizeOrColorStockNums = null; 
          } else {
            this.popActiveGuiGe = data;
            // console.log(data);
            //点击当前元素获取当前元素的库存，上面i标签里的data.stockNum是总的库存，与下面的data.stockNum无关
            this.sizeOrColorStockNums = data.stockNum;  
          };

        // console.log(document.querySelector("sizeList dd.disabled3"));


          var skuInfoAlikeColor = []; //点击当前尺码，获取到skuInfo里面有相同尺码的集合
          for (var i = 0; i < this.data.skuInfo.length; i++) {
            var skuInfo = this.data.skuInfo;
            if (data.saleAttr2Value == skuInfo[i].saleAttr2Value) {
              //点击当前颜色，获取到skuInfo里面有相同尺码的集合
              skuInfoAlikeColor.push(skuInfo[i]); 
              //遍历浏览器里显示的所有颜色
            for (var j = 0; j < this.data.saleAttrList.saleAttr1List.length; j++) { 
              var saleAttr1List = this.data.saleAttrList.saleAttr1List; 
              //我想在判断条件之前，先把所有的元素都清掉isActivess这个类
              // delete saleAttr1List[j]["isActivess"]; 
              if (skuInfo[i].saleAttr1Value == saleAttr1List[j].saleAttr1Value && skuInfo[i].stockNum == 0) {
                  saleAttr1List[j]["isActivess"] = this.popActiveGuiGe;  //然后再给符合判断条件的元素添加这个类                  
              }; 
            };
          };
        }
      },


      //颜色里的元素点击事件
      choose_color(datass,$event) {
        if(this.popActiveColor && this.popActiveColor.barcodeSysCode === datass.barcodeSysCode) {
          this.popActiveColor = null;
          this.sizeOrColorStockNums = null;
        } else {
          this.popActiveColor = datass;
          //点击当前元素获取当前元素的库存，上面i标签里的data.stockNum是总的库存，与下面的data.stockNum无关
          this.sizeOrColorStockNums = datass.stockNum;
        };
        // console.log($event.currentTarget);


        //点击当前颜色，获取到skuInfo里面有相同颜色的集合
        var skuInfoAlikeColor = [];  
        for (var i = 0; i < this.data.skuInfo.length; i++) {
          var skuInfo = this.data.skuInfo;  
          if (datass.saleAttr1Value == skuInfo[i].saleAttr1Value) {
            //点击当前颜色，获取到skuInfo里面有相同颜色的集合
            skuInfoAlikeColor.push(skuInfo[i]); 
          //遍历浏览器里显示的所有尺码
          for (var j = 0; j < this.data.saleAttrList.saleAttr2List.length; j++) { 

            var saleAttr2List = this.data.saleAttrList.saleAttr2List;
            // console.log(saleAttr2List[j]);
              // delete saleAttr2List[j]["isActives"]; 
              if (skuInfo[i].saleAttr2Value == saleAttr2List[j].saleAttr2Value && skuInfo[i].stockNum == 0) {
                saleAttr2List[j]["isActives"] = this.popActiveColor;   
                // console.log(document.querySelectorAll(".sizeList dd"));
                // if (document.querySelectorAll(".sizeList dd").) 
                // this.popActiveColor = null;
              }  
            };
          };
        }

                // console.log(document.querySelectorAll(".sizeList dd"));
                var ddDisabled2 = document.querySelectorAll(".sizeList dd");  
                for (var i = 0; i < ddDisabled2.length; i++) {
                  console.log(ddDisabled2[i]);
                  return false;
                }
                
      },


          // 如果颜色，没有这种规格的时候，或者库存为0的时候，就加上，
          // 如果有这种尺码并且有库存的时候，就去掉isActives


// 如果规格，没有这种颜色的时候，或者库存为0的时候，在去掉，如果有这种颜色并且有库存的时候，给isActives相应的值就好了


      //关闭弹窗
      onMethod() {
        this.$emit("componentCommunication");
      },
    },
    mounted: function() {
      //子组件中的ajax通过组件通信的方式引用
      this.data = this.$attrs.getProductInfoUrlAjax;
    },
    beforeUpdate() {
      //子组件中的ajax通过组件通信的方式引用
      this.data = this.$attrs.getProductInfoUrlAjax
    }
  }
</script>





<!-- if (skuInfo里的尺码== 浏览器里的尺码 && skuInfo里的尺码 != 0) -->


<!-- if (skuInfo里的尺码== 浏览器里的尺码 && skuInfo里的库存 != 0) -->